<!--图片裁剪-->
<div class="modal fade" id="image-crop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="width:750px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">图片裁剪</h4>
            </div>
            <div class="modal-body">
                <div class="container" style="padding: 0 0; width:100%;">
                    <div class="col-md-7">
                        <!-- <h3 class="page-header">Demo:</h3> -->
                        <div class="img-container">
                            <img src="/Public/images/picture.jpg" alt="Picture">
                        </div>
                    </div>
                    <div class="col-md-5">
                        <!-- <h3 class="page-header">Preview:</h3> -->
                        <div class="docs-preview clearfix">
                            <div class="img-preview preview-lg"></div>
                        </div>
                        <!-- <h3 class="page-header">Data:</h3> -->
                        <div class="docs-data">
                            <form action="{:U('imgcrop')}" method="post" name='imgcrop' id='imgcrop'>
                                <div class="input-group hidden">
                                    <label class="input-group-addon" for="dataX">X</label>
                                    <input class="form-control" id="dataX" name='x' type="text" placeholder="x">
                                    <span class="input-group-addon">px</span>
                                </div>
                                <div class="input-group hidden ">
                                    <label class="input-group-addon" for="dataY">Y</label>
                                    <input class="form-control" id="dataY" type="text" name="y" placeholder="y">
                                    <span class="input-group-addon">px</span>
                                </div>
                                <div class="input-group hidden  ">
                                    <label class="input-group-addon" for="dataWidth">Width</label>
                                    <input class="form-control" id="dataWidth" type="text" name="w" placeholder="width">
                                    <span class="input-group-addon">px</span>
                                </div>
                                <div class="input-group hidden ">
                                    <label class="input-group-addon" for="dataHeight">Height</label>
                                    <input class="form-control" id="dataHeight" type="text" name="h" placeholder="height">
                                    <span class="input-group-addon">px</span>
                                </div>
                                <div class="input-group">
                                    <label class="input-group-addon">切后图片尺寸</label>
                                    <input class="form-control" id="dataSizeW" type="text" name="dataSize" value="200"  placeholder="切后图片宽">
                                    <input class="form-control" id="dataSizeH" type="text" name="dataSize" value="200"  placeholder="切后图片高">
                                    <span class="input-group-addon">px</span>
                                </div>
                                <div class="input-group">
                                    <label class="input-group-addon hidden">图片路径</label>
                                    <input type="hidden" value=""  id="oldImgUrl"/>
                                    <input class="form-control" type="hidden" value="" name="imgurl" id="imgurl"/>
                                    <span class="input-group-addon hidden"></span>
                                </div>

                            </form>
                        </div>
                        <div class="btn-group" style="margin-top:30px;" data-toggle="buttons">
                            <label class="btn btn-primary" data-method="setAspectRatio" data-option="1" title="Set Aspect Ratio">
                                <input class="sr-only" id="aspestRatio3" name="aspestRatio" value="1" type="radio">
                                <span class="docs-tooltip" data-toggle="tooltip" title="裁剪框：(1 / 1)">
                                    1:1
                                </span>
                            </label>
                            <label class="btn btn-primary" data-method="setAspectRatio" data-option="NaN" title="Set Aspect Ratio">
                                <input class="sr-only" id="aspestRatio5" name="aspestRatio" value="NaN" type="radio">
                                <span class="docs-tooltip" data-toggle="tooltip" title="裁剪框：自由大小">
                                    自由比例
                                </span>
                            </label>
                        </div>
                    </div> 
                </div>
            </div>
            <div class="modal-footer">
                <button type="button"  id="btn_save_before"  class="btn btn-danger btn-radius">保存原图</button>
                <button type="button"  id="btn_save_crop"  class="btn btn-danger btn-radius">保存截图</button>
                <button type="button"  id="btn_cancel"  class="btn btn-default btn-radius" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>

</div>

<input id="inputImage" class="sr-only" type="file" name="file" style="display:none">
<input type='hidden' value='' name='imgfile' >
<input type='hidden' value='one' class='cropType' >
<input type='hidden' value='' class='manyPicId' >
<a data-toggle="modal" data-target="#image-crop" class="image-dialog-open"></a>